---
id: 5f47633757ae3469f2d33d2e
title: Schritt 45
challengeType: 0
dashedName: step-45
---

# --description--

Wenn du die Breite der Seitenvorschau verkleinerst, wirst du feststellen, dass ein Teil des Textes auf der linken Seite in die nächste Zeile übergeht. Das liegt daran, dass die Breite der `p`-Elemente auf der linken Seite nur `50%` des Platzes einnehmen kann.

Da du weißt, dass die Preise auf der rechten Seite deutlich weniger Zeichen haben, ändere den `width`-Wert der `flavor`-Klasse auf `75%` und den `width`-Wert der `price`-Klasse auf `25%`.

# --hints--

Du solltest die `width`-Eigenschaft in deinem `.flavor`-Selektor auf `75%` setzen.

```js
const flavorWidth = new __helpers.CSSHelp(document).getStyle('.flavor')?.getPropertyValue('width');
assert(flavorWidth === '75%');
```

Du solltest die `width`-Eigenschaft in deinem `.price`-Selektor auf `25%` setzen.

```js
const priceWidth = new __helpers.CSSHelp(document).getStyle('.price')?.getPropertyValue('width');
assert(priceWidth === '25%');
```

# --seed--

## --seed-contents--

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Cafe Menu</title>
    <link href="styles.css" rel="stylesheet"/>
  </head>
  <body>
    <div class="menu">
      <main>
        <h1>CAMPER CAFE</h1>
        <p>Est. 2020</p>
        <section>
          <h2>Coffee</h2>
          <article class="item">
            <p class="flavor">French Vanilla</p><p class="price">3.00</p>
          </article>
          <article class="item">
            <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
          </article>
          <article class="item">
            <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
          </article>
          <article class="item">
            <p class="flavor">Hazelnut</p><p class="price">4.00</p>
          </article>
          <article class="item">
            <p class="flavor">Mocha</p><p class="price">4.50</p>
          </article>
        </section>
      </main>
    </div>
  </body>
</html>
```

```css
body {
  background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
}

h1, h2, p {
  text-align: center;
}

.menu {
  width: 80%;
  background-color: burlywood;
  margin-left: auto;
  margin-right: auto;
}

.item p {
  display: inline-block;
}

--fcc-editable-region--
.flavor {
  text-align: left;
  width: 50%;
}

.price {
  text-align: right;
  width: 50%;
}
--fcc-editable-region--
```

